<template>
  <div class="topics-container">
    <div class="page-header">
      <h1>话题管理</h1>
      <button class="add-button" @click="showAddTopicDialog = true">
        <i class="fa fa-plus"></i>
        添加话题
      </button>
    </div>
    
    <!-- 搜索和筛选 -->
    <div class="search-filter">
      <div class="search-box">
        <i class="fa fa-search"></i>
        <input 
          v-model="searchQuery" 
          type="text" 
          placeholder="搜索话题名称、描述"
          @input="handleSearch"
        />
      </div>
      <div class="filter-group">
        <select v-model="filterStatus" @change="handleFilter">
          <option value="">全部状态</option>
          <option value="active">活跃</option>
          <option value="inactive">不活跃</option>
        </select>
        <select v-model="filterHot" @change="handleFilter">
          <option value="">全部</option>
          <option value="true">热门话题</option>
          <option value="false">普通话题</option>
        </select>
      </div>
    </div>
    
    <!-- 话题列表 -->
    <div class="topics-table-container">
      <table class="topics-table">
        <thead>
          <tr>
            <th><input v-model="selectAll" type="checkbox" @change="toggleSelectAll" /></th>
            <th>ID</th>
            <th>话题名称</th>
            <th>描述</th>
            <th>状态</th>
            <th>是否热门</th>
            <th>参与人数</th>
            <th>相关视频数</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="topic in paginatedTopics" :key="topic.id">
            <td><input v-model="selectedTopics" type="checkbox" :value="topic.id" /></td>
            <td>{{ topic.id }}</td>
            <td class="topic-name">{{ topic.name }}</td>
            <td class="topic-desc">{{ topic.description }}</td>
            <td>
              <span class="status-badge" :class="topic.status">
                {{ topic.status === 'active' ? '活跃' : '不活跃' }}
              </span>
            </td>
            <td>
              <span class="hot-badge" :class="topic.isHot ? 'hot' : 'normal'">
                {{ topic.isHot ? '热门' : '普通' }}
              </span>
            </td>
            <td>{{ topic.participants }}</td>
            <td>{{ topic.videoCount }}</td>
            <td>{{ formatDate(topic.createdAt) }}</td>
            <td class="action-buttons">
              <button class="edit-button" @click="editTopic(topic)">
                <i class="fa fa-edit"></i>
                <span>编辑</span>
              </button>
              <button class="status-button" :class="topic.status" @click="toggleStatus(topic)">
                <i class="fa fa-power-off"></i>
                <span>{{ topic.status === 'active' ? '停用' : '启用' }}</span>
              </button>
              <button class="hot-button" :class="topic.isHot ? 'hot' : 'normal'" @click="toggleHot(topic)">
                <i class="fa fa-fire"></i>
                <span>{{ topic.isHot ? '取消热门' : '设为热门' }}</span>
              </button>
              <button class="delete-button" @click="deleteTopic(topic)">
                <i class="fa fa-trash"></i>
                <span>删除</span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
      
      <!-- 空状态 -->
      <div v-if="filteredTopics.length === 0" class="empty-state">
        <i class="fa fa-search"></i>
        <p>暂无话题数据</p>
      </div>
    </div>
    
    <!-- 分页 -->
    <div v-if="filteredTopics.length > 0" class="pagination">
      <button :disabled="currentPage === 1" @click="currentPage = 1">
        <i class="fa fa-angle-double-left"></i>
      </button>
      <button :disabled="currentPage === 1" @click="currentPage--">
        <i class="fa fa-angle-left"></i>
      </button>
      <span class="page-info">
        第 {{ currentPage }} 页，共 {{ totalPages }} 页
      </span>
      <button :disabled="currentPage === totalPages" @click="currentPage++">
        <i class="fa fa-angle-right"></i>
      </button>
      <button :disabled="currentPage === totalPages" @click="currentPage = totalPages">
        <i class="fa fa-angle-double-right"></i>
      </button>
    </div>
    
    <!-- 添加/编辑话题对话框 -->
    <div v-if="showAddTopicDialog || showEditTopicDialog" class="dialog-overlay" @click="closeDialog">
      <div class="dialog" @click.stop>
        <div class="dialog-header">
          <h3>{{ showEditTopicDialog ? '编辑话题' : '添加话题' }}</h3>
          <button class="close-button" @click="closeDialog">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="dialog-content">
          <form @submit.prevent="submitTopicForm">
            <div class="form-group">
              <label>话题名称</label>
              <input 
                v-model="topicForm.name" 
                type="text" 
                required
                placeholder="请输入话题名称"
              />
            </div>
            <div class="form-group">
              <label>话题描述</label>
              <textarea 
                v-model="topicForm.description" 
                rows="3"
                placeholder="请输入话题描述"
              ></textarea>
            </div>
            <div class="form-group">
              <label>状态</label>
              <select v-model="topicForm.status" required>
                <option value="active">活跃</option>
                <option value="inactive">不活跃</option>
              </select>
            </div>
            <div class="form-group">
              <label>是否热门话题</label>
              <select v-model="topicForm.isHot" required>
                <option :value="true">是</option>
                <option :value="false">否</option>
              </select>
            </div>
            <div class="dialog-footer">
              <button type="button" class="cancel-button" @click="closeDialog">取消</button>
              <button type="submit" class="save-button">{{ showEditTopicDialog ? '更新' : '添加' }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <!-- 左右滑动条 -->
    <div class="horizontal-slider">
      <div class="slider-track">
        <div v-for="item in sliderItems" :key="item.id" class="slider-item">
          <div class="slider-icon" :class="item.iconClass">
            <i class="fa" :class="item.icon"></i>
          </div>
          <span class="slider-text">{{ item.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopicsView',
  data() {
    return {
      // 模拟话题数据
      topics: [
        {
          id: 'topic1',
          name: 'Vue3教程',
          description: 'Vue3框架学习与交流',
          status: 'active',
          isHot: true,
          participants: 5234,
          videoCount: 124,
          createdAt: '2024-01-01T10:00:00Z',
        },
        {
          id: 'topic2',
          name: '前端性能优化',
          description: '分享前端性能优化技巧',
          status: 'active',
          isHot: true,
          participants: 3456,
          videoCount: 89,
          createdAt: '2024-01-02T14:30:00Z',
        },
        {
          id: 'topic3',
          name: 'React Native开发',
          description: 'React Native跨平台应用开发',
          status: 'active',
          isHot: false,
          participants: 1234,
          videoCount: 45,
          createdAt: '2024-01-03T09:15:00Z',
        },
        {
          id: 'topic4',
          name: 'TypeScript进阶',
          description: 'TypeScript高级特性学习',
          status: 'inactive',
          isHot: false,
          participants: 876,
          videoCount: 32,
          createdAt: '2024-01-04T16:45:00Z',
        },
      ],
      searchQuery: '',
      filterStatus: '',
      filterHot: '',
      selectedTopics: [],
      selectAll: false,
      showAddTopicDialog: false,
      showEditTopicDialog: false,
      currentPage: 1,
      itemsPerPage: 10,
      topicForm: {
        id: '',
        name: '',
        description: '',
        status: 'active',
        isHot: false,
      },
    }
  },
  computed: {
    filteredTopics() {
      let filtered = this.topics
      
      // 搜索
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        filtered = filtered.filter(topic => 
          topic.name.toLowerCase().includes(query) || 
          topic.description.toLowerCase().includes(query),
        )
      }
      
      // 状态筛选
      if (this.filterStatus) {
        filtered = filtered.filter(topic => topic.status === this.filterStatus)
      }
      
      // 热门筛选
      if (this.filterHot !== '') {
        filtered = filtered.filter(topic => topic.isHot === (this.filterHot === 'true'))
      }
      
      return filtered
    },
    sliderItems() {
      return [
        { id: 1, icon: 'fa-fire', iconClass: 'hot', text: '热门话题' },
        { id: 2, icon: 'fa-clock-o', iconClass: 'new', text: '最新话题' },
        { id: 3, icon: 'fa-comments', iconClass: 'active', text: '活跃讨论' },
        { id: 4, icon: 'fa-code', iconClass: 'tech', text: '技术分享' },
        { id: 5, icon: 'fa-gamepad', iconClass: 'game', text: '游戏话题' },
        { id: 6, icon: 'fa-music', iconClass: 'music', text: '音乐交流' },
        { id: 7, icon: 'fa-film', iconClass: 'video', text: '影视讨论' },
        { id: 8, icon: 'fa-book', iconClass: 'study', text: '学习分享' },
        { id: 9, icon: 'fa-cutlery', iconClass: 'food', text: '美食话题' },
        { id: 10, icon: 'fa-heart', iconClass: 'love', text: '情感交流' },
      ]
    },
    paginatedTopics() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.filteredTopics.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.filteredTopics.length / this.itemsPerPage)
    },
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    handleFilter() {
      this.currentPage = 1
    },
    toggleSelectAll() {
      if (this.selectAll) {
        this.selectedTopics = this.filteredTopics.map(topic => topic.id)
      } else {
        this.selectedTopics = []
      }
    },
    formatDate(dateString) {
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN')
    },
    editTopic(topic) {
      this.topicForm = { ...topic }
      this.showEditTopicDialog = true
    },
    toggleStatus(topic) {
      topic.status = topic.status === 'active' ? 'inactive' : 'active'
    },
    toggleHot(topic) {
      topic.isHot = !topic.isHot
    },
    deleteTopic(topic) {
      if (confirm(`确定要删除话题「${topic.name}」吗？此操作不可撤销！`)) {
        const index = this.topics.findIndex(t => t.id === topic.id)
        if (index > -1) {
          this.topics.splice(index, 1)
        }
      }
    },
    closeDialog() {
      this.showAddTopicDialog = false
      this.showEditTopicDialog = false
      this.resetForm()
    },
    resetForm() {
      this.topicForm = {
        id: '',
        name: '',
        description: '',
        status: 'active',
        isHot: false,
      }
    },
    submitTopicForm() {
      if (this.showEditTopicDialog) {
        // 编辑话题
        const index = this.topics.findIndex(t => t.id === this.topicForm.id)
        if (index > -1) {
          this.topics[index] = { ...this.topics[index], ...this.topicForm }
        }
      } else {
        // 添加话题
        const newTopic = {
          ...this.topicForm,
          id: 'topic' + (this.topics.length + 1),
          participants: 0,
          videoCount: 0,
          createdAt: new Date().toISOString(),
        }
        this.topics.push(newTopic)
      }
      
      this.closeDialog()
    },
  },
}
</script>

<style scoped>
.topics-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  overflow-x: auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.page-header h1 {
  color: #2c3e50;
  margin: 0;
  font-size: 24px;
}

.add-button {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: background-color 0.3s;
}

.add-button:hover {
  background: #2980b9;
}

.add-button i {
  margin-right: 5px;
}

/* 搜索和筛选 */
.search-filter {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 300px;
}

.search-box i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #95a5a6;
}

.search-box input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.filter-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-group select {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  min-width: 150px;
}

/* 话题列表 */
.topics-table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow-x: auto;
  margin-bottom: 20px;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
  -webkit-overflow-scrolling: touch;
}

.topics-table-container::before, 
.topics-table-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15px;
  pointer-events: none;
  z-index: 1;
}

.topics-table-container::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
  display: none;
}

.topics-table-container::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

.topics-table-container::-webkit-scrollbar {
  height: 8px;
}

.topics-table-container::-webkit-scrollbar-track {
  background: transparent;
  padding: 10px 0;
}

.topics-table-container::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
  transition: background 0.3s;
}

.topics-table-container::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.topics-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1200px;
  table-layout: fixed;
}

.topics-table th,
.topics-table td {
  padding: 12px 20px;
  text-align: left;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}

.topics-table th:nth-child(3),
.topics-table td:nth-child(3) {
  min-width: 150px;
}

.topics-table th:nth-child(4),
.topics-table td:nth-child(4) {
  min-width: 200px;
  white-space: normal;
  word-break: break-word;
}

.topics-table th:nth-child(10),
.topics-table td:nth-child(10) {
  min-width: 250px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.topics-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
}

.topic-name {
  font-weight: 500;
}

.topic-desc {
  max-width: 200px;
  white-space: normal;
  word-break: break-word;
}

.status-badge,
.hot-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: #2ecc71;
  color: white;
}

.status-badge.inactive {
  background: #95a5a6;
  color: white;
}

.hot-badge.hot {
  background: #e74c3c;
  color: white;
}

.hot-badge.normal {
  background: #3498db;
  color: white;
}

.action-buttons {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.action-buttons button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-buttons button span {
  font-size: 12px;
}

.edit-button {
  background: #3498db;
  color: white;
}

.edit-button:hover {
  background: #2980b9;
}

.status-button.active {
  background: #95a5a6;
  color: white;
}

.status-button.inactive {
  background: #2ecc71;
  color: white;
}

.hot-button.hot {
  background: #95a5a6;
  color: white;
}

.hot-button.normal {
  background: #e74c3c;
  color: white;
}

.delete-button {
  background: #e74c3c;
  color: white;
}

.delete-button:hover {
  background: #c0392b;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #95a5a6;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.pagination button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.pagination button:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #3498db;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  color: #666;
}

/* 对话框 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.dialog-header h3 {
  margin: 0;
  color: #2c3e50;
}

.close-button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #95a5a6;
}

.dialog-content {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #34495e;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.cancel-button,
.save-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.cancel-button {
  background: #ecf0f1;
  color: #7f8c8d;
}

.cancel-button:hover {
  background: #bdc3c7;
}

.save-button {
  background: #3498db;
  color: white;
}

.save-button:hover {
  background: #2980b9;
}

/* 左右滑动条样式 */
.horizontal-slider {
  margin-top: 30px;
  padding: 15px 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: relative;
}

.horizontal-slider::before,
.horizontal-slider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  z-index: 1;
  pointer-events: none;
}

.horizontal-slider::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.horizontal-slider::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

.slider-track {
  display: flex;
  gap: 15px;
  padding: 0 30px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
  -webkit-overflow-scrolling: touch;
}

.slider-track::-webkit-scrollbar {
  height: 6px;
}

.slider-track::-webkit-scrollbar-track {
  background: transparent;
}

.slider-track::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.slider-track::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.slider-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s;
  min-width: 80px;
}

.slider-item:hover {
  transform: translateY(-5px);
}

.slider-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 8px;
  color: white;
  transition: all 0.3s;
}

.slider-icon.hot {
  background: linear-gradient(45deg, #e74c3c, #ff6b6b);
}

.slider-icon.new {
  background: linear-gradient(45deg, #3498db, #5dade2);
}

.slider-icon.active {
  background: linear-gradient(45deg, #2ecc71, #58d68d);
}

.slider-icon.tech {
  background: linear-gradient(45deg, #9b59b6, #b39ddb);
}

.slider-icon.game {
  background: linear-gradient(45deg, #f39c12, #f8c471);
}

.slider-icon.music {
  background: linear-gradient(45deg, #e67e22, #f39c12);
}

.slider-icon.video {
  background: linear-gradient(45deg, #1abc9c, #48c9b0);
}

.slider-icon.study {
  background: linear-gradient(45deg, #34495e, #5d6d7e);
}

.slider-icon.food {
  background: linear-gradient(45deg, #922b21, #922b21);
}

.slider-icon.love {
  background: linear-gradient(45deg, #e91e63, #f06292);
}

.slider-icon:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  transform: scale(1.1);
}

.slider-text {
  font-size: 12px;
  color: #2c3e50;
  text-align: center;
  white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .topics-container {
    padding: 10px;
  }
  
  .search-filter {
    flex-direction: column;
  }
  
  .filter-group {
    width: 100%;
  }
  
  .filter-group select {
    flex: 1;
  }
  
  .topics-table-container {
    overflow-x: auto;
  }
  
  .topics-table {
    display: block;
    overflow-x: auto;
  }
  
  .topics-table th,
  .topics-table td {
    padding: 8px;
    font-size: 13px;
  }
  
  .topic-desc {
    max-width: 150px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .pagination {
    flex-wrap: wrap;
  }
  
  .horizontal-slider {
    margin-top: 20px;
  }
  
  .slider-track {
    padding: 0 20px;
    gap: 10px;
  }
  
  .slider-item {
    min-width: 70px;
  }
  
  .slider-icon {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }
}
</style>